<template>
    <el-dialog v-model="visible" @close="closePage" title="字典数据管理" width="65%">
        <!-- 表格、分页 -->
        <el-space class="mb-4">
            <el-button plain type="primary" :icon="CirclePlus" @click="showAddOrUpdatePage(null)"
                v-perm="['sys:dict:data:add']">添加</el-button>
            <el-button plain type="danger" :icon="Delete" @click="batchDelete"
                v-perm="['sys:dict:data:delete']">删除</el-button>
        </el-space>
        <el-table :data="tableData" border :header-cell-style="{ 'background': '#f2f2f2', 'color': '#515a6e' }"
            style="width: 100%" height="calc(100vh - 340px)" max-height="calc(100vh - 340px)" row-key="id"
            @selection-change="handleSelectionChange" v-loading="tableLoading">
            <el-table-column type="selection" width="55px" />
            <el-table-column prop="type" label="字典类型" />
            <el-table-column prop="key" label="字典key" />
            <el-table-column prop="value" label="字典value" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="css" label="样式" />
            <el-table-column label="操作" width="220px">
                <template #default="scope">
                    <el-space>
                        <el-button link type="warning" size="small" :icon="EditPen"
                            @click="showAddOrUpdatePage(scope.row)" v-perm="['sys:dict:data:update']">修改</el-button>
                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteById(scope.row)"
                            v-perm="['sys:dict:data:delete']">删除</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPageNum" v-model:page-size="currentPageSize"
            :page-sizes="[30, 50, 100, 300, 500]" layout="total, sizes, prev, pager, next, jumper" background
            :total="totalCount" @size-change="changePageSize" @current-change="changePageNum" />
        <AddOrUpdate ref="addOrUpdatePageRef" :dictType="dictType" :querySelective="querySelective"></AddOrUpdate>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'

import { CirclePlus, Delete, Refresh, Search, EditPen, Star } from '@element-plus/icons-vue'
import { querySelectiveReq, deleteReq } from '@/api/sys/dict/data/index.js'

import { confirm } from '@/utils/messageBoxUtils.js'
import { success, info } from '@/utils/messageUtils.js';

import AddOrUpdate from "@/views/sys/dict/data/AddOrUpdate.vue";

const visible = ref(false)
const dictType = ref('')
const open = (row) => {
    dictType.value = row.type
    querySelective();
    visible.value = true;
}

// 分页查询、条件查询
const tableLoading = ref(false)
const tableData = ref([])
const total = ref()
const querySelective = () => {
    tableLoading.value = true;
    querySelectiveReq(
        currentPageNum.value,
        currentPageSize.value,
        { type: dictType.value }
    ).then(res => {
        if (res.code == 200) {
            tableData.value = res.data
            total.value = res.total
        }
    }).finally(() => {
        tableLoading.value = false
    })
}
const totalCount = ref(0)
watch(() => total.value, (newValue) => {
    totalCount.value = newValue;
});

const currentPageNum = ref(1)
const currentPageSize = ref(30)
// 翻页
const changePageNum = (pageNum) => {
    currentPageNum.value = pageNum
    querySelective();
}
// 改变页大小
const changePageSize = (pageSize) => {
    currentPageNum.value = 1
    currentPageSize.value = pageSize
    querySelective();
}

// 删除
const deleteById = (row) => {
    const ids = []
    ids.push(row.id)
    confirm("您确定删除\"" + row.key + "\"字典数据吗？").then(() => {
        deleteReq(ids).then(res => {
            if (res.code == 200) {
                querySelective();
                success("删除" + row.key + "字典数据成功！");
            }
        })
    }).catch(() => {
        info("取消删除！");
    })
}

const selectIds = ref([])
const handleSelectionChange = (val) => {
    selectIds.value = []
    val.forEach(item => {
        selectIds.value.push(item.id)
    })
}

const batchDelete = () => {
    confirm("您确定删除选中的字典数据吗？").then(() => {
        deleteReq(selectIds.value).then(res => {
            if (res.code == 200) {
                querySelective();
                success("删除成功！");
            }
        })
    }).catch(() => {
        info("取消删除！");
    })
}

// 添加\修改
const addOrUpdatePageRef = ref()
const showAddOrUpdatePage = (row) => {
    addOrUpdatePageRef.value?.open(row)
}

defineExpose({
    open,
})

const closePage = () => {
    visible.value = false;
}
</script>